<template>
    <div>
        <van-nav-bar title="首页" left-text="返回" left-arrow @click-left="onClickLeft(() => $router.push('/'))" />
        <search></search>
        <swipe :images="imageList"></swipe>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData"  :icon="item.image_src" :text="item.name" />
        </van-grid>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData"  :icon="item.image_src" :text="item.name" />
        </van-grid>
        <div class="mx" v-show="status">
             <h3>京东秒杀  {{ time +'秒' }}<img src="./img/首页_03.jpg" alt="" style="width: 130px;"> &nbsp;发现好货</h3>
             <img src="./img/首页_05.jpg" alt="" style="width: 400px;">

        </div>
        <div style="height: 50px;"></div>
    </div>
</template>

<script setup>
import swipe from '@/components/swipe.vue';
import { ref } from 'vue';
import search from '@/components/search.vue';
const imageList = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
]
let catitemsApiData=ref([])
import { catitemsApi } from '@/api/api';
catitemsApi().then(res=>{
    console.log(res);
    catitemsApiData.value=res.data.message
    
})
const status =ref(true)
let time=ref(30)
let timer= setInterval(() => {
    time.value--
    if(time.value==0){
        status.value=false
        clearInterval(timer)
    }
}, 1000);
</script>

<style lang="scss" scoped></style>